<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    <div id="pagiRoot"></div>
    <div id="tableRoot"></div>

    <script src="../../../tools/mathtool.js"></script>
    <script src="../../../tools/data_structure.js"></script>
    <script src="../../../tools/styletool.js"></script>
    <script src="../../../tools/mytable.js"></script>

    <script>
        class Paginator {
            constructor(root, options = {}) {
                this.root = root
                this.options = {
                    totalPages: options.totalPages || 100,
                    currentPage: options.currentPage || 1
                }

                // 绘制基本元素
                this.renderBasic()

                // 绘制页码
                this.renderPagers()

                // 找出控件元素
                this.findElements()

                // 绑定事件
                this.bindEvents()
            }

            /* 绑定事件 */
            bindEvents() {
                const pgThis = this
                for (let i = 0; i < this.pagers.length; i++) {
                    const pager = this.pagers[i]
                    pager.addEventListener(
                        "click",
                        () => {
                            pgThis.setCurrentPage(pager)
                            console.log("turn to page", pager.innerText)
                        }
                    )
                }
            }

            /* 设置当前页码：当前页码高亮 其余取消高亮 */
            setCurrentPage(pagerElement){
                // 记录当前页为pagerElement中的文本
                this.options.currentPage = pagerElement.innerText * 1

                // 所有页码取消高亮
                for (let i = 0; i < this.pagers.length; i++) {
                    const pager = this.pagers[i]
                    pager.style.backgroundColor = "white"
                }

                // 当前页码设置高亮
                pagerElement.style.backgroundColor = "orange"
            }

            /* 绘制页码 */
            renderPagers() {
                /* 
                    _renderPagers(
                        [
                            [1,2],
                            [],
                            [18,22],
                            [],
                            [123,124]
                        ]
                    )
                */
                const _renderPagers = ranges => {
                    ranges.forEach(
                        // 遍历每一组范围
                        r => {
                            if (r.length != 0) {
                                for (let i = r[0]; i <= r[1]; i++) {
                                    if (i === this.options.currentPage) {
                                        this.pagerBox.innerHTML += `<p style="background-color:orange;border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px;">${i}</p>`
                                    } else {
                                        this.pagerBox.innerHTML += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px;">${i}</p>`
                                    }
                                }
                            } else {
                                this.pagerBox.innerHTML += "..."
                            }
                        }
                    );
                }

                if (this.currentPageOnEdge()) {
                    _renderPagers(
                        [
                            // 绘制头5页
                            [1, 5],

                            // 绘制...
                            [],

                            // 绘制尾5页
                            [this.options.totalPages - 4, this.options.totalPages],
                        ]
                    )
                } else {
                    // 绘制头2页
                    // 绘制...
                    // 绘制中间5页
                    // 绘制...
                    // 绘制尾2页
                    _renderPagers(
                        [
                            [1, 2],
                            [],
                            [this.options.currentPage - 2, this.options.currentPage + 2],
                            [],
                            [this.options.totalPages - 1, this.options.totalPages]
                        ]
                    )
                }
            }

            /* 判断当前页是否位于边缘地带[1,5] [中心地带] [120,124] */
            currentPageOnEdge() {
                return (this.options.currentPage >= 1 && this.options.currentPage <= 5) || (this.options.currentPage > this.options.totalPages - 5)
            }

            /* 找出控件元素 */
            findElements() {
                // 首页
                this.btnFirst = this.root.querySelector("#btnFirst")

                // 末页
                this.btnLast = this.root.querySelector("#btnLast")

                // 上一页
                this.btnPrev = this.root.querySelector("#btnPrev")

                // 下一页
                this.btnNext = this.root.querySelector("#btnNext")

                // 跳转按钮
                this.btnGo = this.root.querySelector("button")

                // 页码
                this.pagers = this.root.querySelectorAll("p")
            }

            /* 绘制基本元素 */
            renderBasic() {
                this.root.innerHTML = ` 
                <div class="container"
                    style="padding: 0px; width: 800px; height: 40px; border: 1px solid rgb(51, 51, 51); margin: 30px auto; display: flex; justify-content: center; align-items: center;">
                    <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px; background-color: rgb(255, 255, 255);"
                        id="btnFirst" disabled="false">first</div>
                    <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px; background-color: rgb(255, 255, 255);"
                        id="btnPrev" disabled="false">prev</div>

                    <div style="display: flex; justify-content: center; align-items: center;" class="pagers">
                    </div>

                    <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px; background-color: rgb(255, 255, 255);"
                        id="btnNext" disabled="false">next</div>
                    <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px; background-color: rgb(255, 255, 255);"
                        id="btnLast" disabled="false">last</div>
                    <input type="number" style="outline: none; width: 50px; height: 20px;">
                    <button style="outline: none; width: 30px; height: 24px; margin-left: 5px;">go</button>
                </div>                               
                `
                // 页码容器
                this.pagerBox = this.root.querySelector(".pagers")
            }
        }
    </script>

    <script>
        /* 造1234条学生数据 */
        const students = createStudents(1234)
        console.log(students);

        const mt = new MyTable(
            tableRoot,
            students,
            {
                thead: ["ID", "姓名", "年龄", "性别", "班级", "薪水"],

                // 使用使用默认布局（布局+样式）
                useDefaultLayout: true,

                // 每页显示的数据条数
                pageNum: 10
            }
        )

        const pg = new Paginator(
            pagiRoot,
            {
                totalPages: Math.ceil(1234 / 10),
                currentPage: 122,
            }
        )

    </script>

</body>

</html>